<template>
  <div class="app-container">
    <avue-crud
      ref="crud"
      :page="page"
      :data="dataList"
      :table-loading="dataListLoading"
      :option="tableOption"
      @search-change="searchChange"
      @selection-change="selectionChange"
      @on-load="getDataList"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click.stop="addOrUpdateHandle()"
        >新增</el-button>

        <el-button
          type="danger"
          size="small"
          :disabled="dataListSelections.length <= 0"
          @click="deleteHandle()"
        >批量删除</el-button>
      </template>
      <template
        slot="category"
        slot-scope="scope"
      >
        {{scope.row.category.name}}
      </template>
      <template
        slot="sell_status"
        slot-scope="scope"
      >
        <el-tag
          v-if="scope.row.sell_status === 1"
          size="small"
        >上架</el-tag>
        <el-tag
          v-else
          size="small"
        >未上架</el-tag>
      </template>

      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="addOrUpdateHandle(scope.row.id)"
        >修改</el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="small"
          @click="deleteHandle(scope.row.prodId)"
        >删除</el-button>

      </template>
    </avue-crud>
    <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
      <div v-if="detailShow" class="product-detail">
        <div class="product-info">
          <prodInfo ref="prodInfo" :prod_id="currentProdID"/>
        </div>
        <div class="footer">
          <div class="left" />
          <div class="right">
            <el-button @click="detailShow=false">取 消</el-button>
            <el-button type="primary" @click="saveProduct">保 存</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style  lang="scss" scoped>
  .app-container{
    position: relative;
  }
.avue-crud__tip{
  display: none;
}
  .product-detail{
    background-color: white;
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    z-index: 4;
    height: -webkit-calc(100% + 33px);
    height: -moz-calc(100% + 33px);
    height: calc(100% + 33px);
    display: flex;
    flex-direction: column;
  }
  .product-detail .product-info{
    flex-grow: 1;
    height: calc(100% - 33px);
    overflow-y: auto;
  }
  .product-detail .footer{
    height: 50px;
    padding: 0 20px;
    display: flex;
  }
  .product-detail .footer .left{
    flex-grow: 1;
  }
  .product-detail .footer .el-button{
    margin: 0 10px;
  }
</style>

<script>
import animate from '@/assets/styles/animate.min.css'
import { tableOption } from '@/crud/mall/prodList'
import {productListPage} from '@/api/mall/product'
import prodInfo from './prodInfo.vue'
export default {
  components: { prodInfo },
  data() {
    return {
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dataList: [],
      dataListLoading: false,
      tableOption,
      dataListSelections: [],
      detailShow: false,
      currentProdID:undefined,//当前选中的商品ID
    }
  },
  methods: {
    getDataList: function(page, params, done) {
        this.dataListLoading = true
        productListPage(Object.assign(
            {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
            },
            params
        )).then(res=>{
            this.dataList = res.records
            this.page.total = res.total
            this.dataListLoading = false
            if(done){
                done()
            }
        })
    },
    searchChange: function(params, done) {
        this.getDataList(this.page, params,done)
    },
    selectionChange: function(val) { // 多选变化

    },
    addOrUpdateHandle: function(id) {
      if(id){
         this.currentProdID=id
      }else{
         this.currentProdID=undefined
      }
      this.detailShow = true
    },
    deleteHandle: function(id) {

    },
    saveProduct: function() {
      this.$refs['prodInfo'].dataFormSubmit()
    },
    saveProductCallback:function () {
        this.detailShow=false
        this.page.currentPage=1
        this.getDataList()
    }
  }
}
</script>
